<template>
  <div>
    <van-card
        v-for="item in housList"
        :key="item.houseCode"
        :desc="item.desc"
        :title="item.title"
        :thumb="imgSrc+item.houseImg"
        @click="houseFn(item)"
      >
        <template #tags>
          <van-tag plain type="danger" v-for="(item,index) in item.tags" :key="index">{{ item }}</van-tag>
        </template>
        <template #price>
          <div class="van-card__price-integer">
            {{item.price}}元/月
          </div>
        </template>
      </van-card>
  </div>
</template>

<script>
import { baseURL } from '@/utiles/request.js'
export default {
  props: ['housList'],
  data () {
    return {
      housePage: {},
      imgSrc: baseURL
    }
  },
  methods: {
    houseFn (val) {
      console.log(val)
      this.$router.push({
        path: `/detail/${val.houseCode}`,
        params: val
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-card__thumb {
  width: 106px;
  height: 80px;
  img {
    border-radius: 0;
  }
}
.van-card__header {
  border-bottom: 1px solid #ccc;
}
/deep/.van-card__title {
  font-size: 15px;
  font-weight: 700;
}
/deep/.HouseItem_desc__5-mp4 {
  font-size: 12px;
  color: #afb2b3;
}
/deep/.van-card__price-integer {
  font-size: 16px;
  font-weight: 700;
  color: #e8634c;
}
/deep/.van-card__price-currency {
  display: none;
}
/deep/ .van-tag--danger.van-tag--plain {
  background-color: #e2f5f8;
  color: #44becc;
  border: none;
  margin-right: 5px;
}
/deep/ .van-tag--plain::before{
   border: none;
 }
</style>
